<!--于卓凡-->
<!--2021/05/27-->
<!--GIS视频监控表单编辑界面-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <title>天地图测试</title>
    <link rel="stylesheet" href="../dist/tiandi-marker-select.css">
    <script src="https://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"
            type="text/javascript"></script>
    <script src="vue.global.js"></script>
    <script src="../dist/tiandi-marker-select.umd.js"></script>
</head>
<body>
<div id="app">
    <map-marker-select :initlng="lng" :initlat="lat" @lnglat-change="selectMarker"></map-marker-select>
</div>

<script>

    const {createApp, ref, onMounted, watch, nextTick} = Vue;

    const MapMarkerSelect = window['TianDiMap']['MapMarkerSelect'];
    console.log(MapMarkerSelect)


    const app = createApp({
        data() {
            return {
                lng: "",
                lat: ""
            }
        },
        components: {
            MapMarkerSelect
        },
        methods: {
            selectMarker(data) {
                console.log(data)
            }
        }
    });
    // app.component('map-marker-select', MapMarkerSelect);
    app.mount('#app');

</script>
</body>

</html>